<template>
  <div class="form-setting-panel form-user-center-setting">
    <mform-setting-title title="个人信息">
    </mform-setting-title>
    
    <mform-item :label="backgroundField.displayName">
      <div class="form-user-center-setting-tip">
        建议尺寸 750*344像素
      </div>
      <div>
        <el-upload 
          ref="upload"
          action="string"
          :on-preview="handlePictureCardPreview"
          :before-upload="onBeforeUploadImage"
          :http-request="uploadImagePic"
          :limit="10000"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png"
          :on-change="fileChange"
        >
          <img v-if="value.backgroundUrl" :src="value.backgroundUrl" class="avatar">
          <i class="el-icon-plus" v-else></i>
        </el-upload>
      </div>
    </mform-item>
    
  </div>
</template>

<script>
/* model */
import { FormUserCenterBackgroundField } from '@src/mform/components/FormUserCenter/FormUserCenterModel.ts'
/* mixin */
import SettingMixin from '@src/mform/mixin/setting'
/* props */
import { settingProps } from '@src/mform/components/props'
/* util */
import * as FormUtil from '@src/component/form/util'
import Uploader from 'packages/BaseUpload/uploader'
import _ from 'lodash'

export default {
  name: 'mform-user-center-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
    }
  },
  computed: {
    backgroundField() {
      return FormUserCenterBackgroundField
    },
    settingFields() {
      return [this.backgroundField]
    },
    value() {
      let backgroundUrl = this.fieldSetting.backgroundUrl || ''
      return {
        backgroundUrl
      }
    }
  },
  methods: {
    handlePictureCardPreview (file) {
      this.$previewElementImg(file.url)
    },
    onBeforeUploadImage (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2mb!');
      }
      
      return isJPG && isLt2M;
    },
    uploadImagePic(param) {
      Uploader.upload(param.file, '/files/upload')
        .then((result) => {
          if (result.status != 0) {
            this.$message({
              message: `${result.message}`,
              duration: 1500,
              type: 'error',
            });
            return;
          }
          
          let file = result.data;
          let item = {
            uid: param.file.uid,
            id: file.id,
            filename: file.fileName,
            // 如果后端返回url,必须使用。如果后端不返回，需要拼接
            url: file.ossUrl || file.url || `/files/get?fileId=${file.id}`,
            fileSize: file.fileSizeStr,
          }
          
          this.update(item.url, 'backgroundUrl')
        })
        .catch((err) => {
          console.warn(err)
        })
        .finally(() => { 
          // 
        })
    },
    fileChange(file) {
      this.$refs.upload.clearFiles(); // 清除文件对象
    },
    update(value, prop, isSetting = true) {
      this.$emit('input', { value, prop, isSetting });
    }
  }
};
</script>

<style lang="scss">
.form-user-center-setting-tip {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #BFBFBF;
}

.form-user-center-setting {
  .el-upload {
    width: 100px;
    height: 56px;
    background: #F5F5F5;
    border-radius: 4px;
    border: 1px dotted #D9D9D9;
    i {
      font-size: 24px;
      line-height: 50px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
